<template>
	<view class="">
		<view class="date-box">
			<ren-calendar ref='ren' :markDays='markDays' :showCheck="true" :headerBar='true' :collapsible="false" @onDayClick='onDayClick'></ren-calendar>
		</view>
		
		<view class="box" v-if="clubList && clubList.length">
			<view v-for="(v,i) in clubList" :key="i">
				<view class="between align-c">
					<view class="title" v-if="v && v.location && v.location.title">{{ v.location.title }}</view>
					<view class="title" v-else>暂无场馆名</view>
				</view>
				<view class="grid">
					<block v-for="(item,index) in v.location.durings" :key="index">
						<view :class="[{'tag':item.isCheck},{'tag_none':!item.isCheck},{'tag_act':item.isCanCheck}]" @click="chooseTime(i,index)">{{ item.during }}</view>
					</block>
				</view>
			</view>
		</view>
		
		<button class="btn" v-if="checkVenue&& checkDuring" @click="confirm">确认</button>
	</view>
</template>

<script>
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue';
import { type } from 'os';
	export default {
		components: {
			RenCalendar,
		},
		data() {
			return {
				curDate: '',
				markDays: [],
				clubList: [],
				date: '',
				shop_id: '',
				dateY: '',
				dateM: '',
				checkVenue: null,
				checkDuring: null,
				type: '',
				location_id: '',
			}
		},
		onReady() {
			let today = this.$refs.ren.getToday().date;
			this.curDate = today;
			
		},
		onLoad(opt) {
			this.type = opt.type;
			this.location_id = opt.location_id;
			var date = new Date();
			var m = date.getMonth() + 1;
			var y = date.getFullYear();
			var d = date.getDate();
			this.date = y + '-' + m + '-' + d;
			this.shop_id = uni.getStorageSync('shopId');
		},
		onShow() {
			this.getTable();
		},
		methods: {
			onDayClick(data) {
				this.curDate = data.date;
				let day = data.date;
				let arr = day.split('-');
				let list = [];
				this.dateY = arr[0];
				this.dateM = arr[1];
				arr.forEach(v => {
					v = parseInt(v);
					list.push(v)
				})
				let str = list.join('-');
				this.date =  str;
				this.getTable();
			},
			async getTable() {
				let res = await this.$api.get(`staff/table/detail`,{
					date: this.date,
					shop_id: this.shop_id,
					type: this.type,
					location_id: this.location_id,
				});
				if(res.code == 200) {
					var arr = res.data.data;
					if(arr&&arr.length) {
						arr.forEach((item,index) => {
							var list = item.during_id;
							if(item.location&& item.location.durings&& item.location.durings.length) {
								item.location.durings.forEach(v => {
									v.isCanCheck = false;
									if(list.includes(v.id)) {
										v.isCheck = false;
									}else {
										v.isCheck = true;
									}
								})
							}
						})
						
						var list = res.data.days,array=[];
						if(list.length) {
							list.forEach(v => {
								array.push(`${this.dateY}-${this.dateM}-${v}`)
							})
						}
						this.markDays.push(...array)
						this.clubList = arr;
					}else {
						this.clubList = arr;
					}
				}
			},
			chooseTime(i,index) {
				if(!this.clubList[i].location.durings[index].isCheck) {
					return false;
				}
				this.clubList.forEach(item => {
					item.location.durings.forEach(v => {
						v.isCanCheck = false;
					})
				})
				this.clubList[i].location.durings[index].isCanCheck = true;
				this.checkVenue = this.clubList[i];
				this.checkDuring = this.clubList[i].location.durings[index];
				
			},
			confirm() {
				var time_at = this.checkVenue.date + ' ' + this.checkDuring.during;
				var date1=new Date(time_at) //要对比的时间
				var date2=new Date(); //获取当前时间对象
				var num=24*60*60*1000 ; //一天的毫秒数
				var cha=date2.getTime()-date1.getTime(); //两个时间的毫秒差
				if(cha>0){
					if(cha>num){
						// alert("不是今天的过去时间")
					}else if(date1.getDate()!=date2.getDate()){
						// alert("不是今天的过去时间")
					}else {
						// alert("是今天里的过去时间")
					}
					this.toast('开课时间不能晚于当前时间');
					return false;
				}else if(cha<0){
					// alert("是未来时间");
				}else{
					this.toast('开课时间不能是当前时间');
					return false;
					// alert("是现在");
				}
				
				uni.$emit('returnDate', JSON.stringify(this.checkVenue))
				uni.$emit('returnTime', JSON.stringify(this.checkDuring));
				uni.navigateBack();
			}
		}
	}
</script>

<style>
	page {
		background-color: #F7F7F7;
		font-size: 27rpx;
	}
</style>

<style lang="scss" scoped>
	.date-box {
		background-color: #FFF;
		padding: 10rpx;
		padding-top: 0;
		border-radius: 0 0 40rpx 40rpx;
		position: relative;
		.choose {
			font-size: 27rpx;
			position: absolute;
			right: 40rpx;
			top: 20rpx;
			text-align: right;
			justify-content: flex-end;
			image {
				width: 17rpx;
				height: 12rpx;
				margin-left: 8rpx;
			}
		}
	}
	.add {
		margin: 20rpx 27rpx;
		background-color: #FFF;
		color: #F17816;
		font-size: 27rpx;
		justify-content: center;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 13rpx;
		&_icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 8rpx;
		}
	}
	.box {
		margin: 20rpx 27rpx;
		background-color: #FFF;
		border-radius: 13rpx;
		padding: 24rpx;
		font-size: 27rpx;
		position: relative;
		.title {
			margin-bottom: 16rpx;
		}
		.edit_btn {
			position: absolute;
			right: 24rpx;
			top: 24rpx;
		}
	}
	.grid {
		padding-bottom: 10rpx;
		display: grid;
		grid-template-columns: 120rpx 120rpx 120rpx 120rpx 120rpx;
		.tag,.tag_act,.tag_none {
			width: 93rpx;
			height: 40rpx;
			line-height: 40rpx;
			text-align: center;
			background-color: #FFE2CB;
			color: #F17816;
			font-size: 24rpx;
			border-radius: 7rpx;
			margin-bottom: 20rpx;
		}
		.tag_act {
			background-color: #F17816;
			color: #FFF;
		}
		.tag_none {
			background-color: #F5F5F5;
			color: #999999;
		}
	}
	.btn {
		background-color: #F17816;
		color: #FFF;
		font-size: 32rpx;
		height: 93rpx;
		line-height: 93rpx;
		margin: 27rpx;
	}
</style>
